<template>
  <div class="List">
    <div class="back" @click="headerClick"><van-icon name="arrow-left" /></div>
    <ul class="Listcon">
      <router-link :to="{path:'/clubs/details',
    query:{name:item.hottopicId}}" v-for="item in list" :key="item.newtitle" >
        <li>
          <p>
            <img
              :src="item.imgurl"
              alt=""
            />
          </p>
          <p class="topichot">
            <b> <van-icon name="hot" color="green" />{{item.newtitle}}</b>
            <span>{{item.onlooker}} | {{item.pate}}参与</span>
          </p>
        </li>
      </router-link>
      <!-- <li>
<p>
  <img src="https://img2.baidu.com/it/u=357076193,2253271529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt="">
</p>
    <p class="topichot">
     <b> <van-icon name="hot" color="green"/>那些年我和老师的故事</b>
     <span>1442人浏览 | 48人参与</span>
    </p>
  </li> -->
    </ul>
  </div>
</template>

<script>
import clubs from "@/api/clubs.js"
export default {
  data(){
    return{
      list:[]
    }
  },
  mounted(){
    this.getClubsList1()
  },
  methods:{
    async getClubsList1(){
      //  console.log(res);
      let res = await  clubs.getClubsList()
      console.log(res)
      this.list=res.data
    },
    headerClick(){
      // console.log( this.$router);
      this.$router.go(-1)
    }
  }
};
</script>

<style lang="scss" scoped>
li {
  border-bottom: 1px solid #ccc;
  display: flex;
  padding: 10px 0;
  img {
    width: 100px;
    height: 50px;
    border-radius: 5px;
  }
  .topichot {
    b {
      display: block;
      padding: 5px;
    }
    span {
      font-size: 12px;
      padding: 5px;
    }
  }
  p {
    margin: 5px;
  }
}
.back{
  z-index: 2;
  width: 30px;
  height: 30px;
  background: rgba($color: #f5f5f5, $alpha: 0.7);
  border-radius:20px ;
  text-align: center;
  line-height: 30px;
  position: fixed;
  top: 10px;
  left: 10px;
  .van-icon{
    font-size: 18px;
    color: #000;
    text-align: center;
  }
}
.List{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.Listcon{
  overflow: scroll;
  flex: 1;
}
</style>